<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./lbsl.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <title>列表示例</title>
</head>
<body>
    <div id="app">
        <div class="all">
            <div class="leftbox">
                <div class="ltop">
                    <div class="title">{{title}}</div>
                    <div class="xtk">
                    <div class="xt"></div>
                    <div class="xt"></div>
                    <div class="xt"></div>
                    </div>
                </div>
                <div class="ldb">
                    <div class="box">
                        <img src="../image/sy.png" class="tp">
                        <div class="zt">{{sy}}</div>
                    </div>
                    <div class="box">
                        <img src="../image/set_click.png" class="tp">
                        <div class="zt">{{sz}}</div>
                        <img src="../image/lh7.png" class="jt">
                    </div>
                    <div class="box zt" style="margin-left:24px">{{dwgl}}</div>
                    <div class="box zt" style="margin-left:24px">{{qxgl}}</div>
                    <div class="box zt" style="margin-left:24px">{{cdsz}}</div>
                    <div class="box">
                    <div class="zt" style="margin-left: 24px;">{{rygl}}</div>
                    <div class="hx"></div>
                    </div>
                </div>
            </div>
            <div class="rightbox">
                <div class="rtop">
                    <div class="xx">{{xx}}</div>
                    <img src="../image/tx.png" class="tx">
                    <div class="hy" style="color:#EAB924;">{{cjgly}}</div>
                    <div class="hy">{{hy}}</div>
                    <div class="hk">
                        <div class="kg"></div>
                        <div class="tc">{{tc}}</div>
                    </div>
                </div>
                <div class="xk">
                    <div class="rq">{{rq}}</div>
                    <img src="../image/4.png" class="tp1">
                    <div class="lk">
                        <div class="yq"></div>
                        <div class="ss">{{ss}}</div>
                    </div>
                    <img src="../image/sc.png" class="hk1">
                </div>
                <div class="box1">
                    <img src="../image/2.png" class="tp2">
                    <div class="bjbox">
                    <div class="bjsc" style="margin-top: 0px;">
                        <img src="../image/bx.png" class="bj">
                        <img src="../image/sc.png" class="sc1">
                    </div>
                    <div class="bjsc">
                        <img src="../image/bx.png" class="bj">
                        <img src="../image/sc.png" class="sc1">
                    </div>
                    <div class="bjsc">
                        <img src="../image/bx.png" class="bj">
                        <img src="../image/sc.png" class="sc1">
                    </div>
                    <div class="bjsc">
                        <img src="../image/bx.png" class="bj">
                        <img src="../image/sc.png" class="sc1">
                    </div>
                    </div>

                    <img src="../image/5.png" class="tp3">
                    <img src="../image/6.png" class="tp4">
                </div>


            </div>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            title:'ORDER聚造',
            sy:'首页',
            sz:'系统设置',
            dwgl:'单位管理',
            qxgl:'权限管理',
            cdsz:'菜单设置',
            rygl:'人员管理',
            xx:'系统设置 / 人员管理',
            cjgly:'超级管理员',
            hy:'小王，您好！',
            tc:'退出',
            rq:'日期',
            ss:'搜索',
            sc:'删除'

        },
    })
</script>
</html>
</body>
</html>